<template>
  <div class="newscenter_page">
    <van-nav-bar
      title="消息中心"
      right-text="排序"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-tabs v-model="active">
      <van-tab title="全部消息">
          <AllNews />
      </van-tab>
      <van-tab title="系统消息">
          <Xitong />
      </van-tab>
      <van-tab title="个人消息"> 
          <GerenNews />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import AllNews from '../components/NewsCenter/AllNews'
import Xitong from '..//components/NewsCenter/Xitong'
import GerenNews from '../components/NewsCenter/GerenNews'
export default {
  data() {
    return {
      active: '',
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
  components:{
      AllNews,
      Xitong,
      GerenNews
  }
};
</script>

<style lang="less" scoped>
.newscenter_page {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
}
/deep/.van-nav-bar {
  width: 100vw;
  height: 45px;
  background-color: #039;
  .van-icon {
    color: #fff;
    font-size: 16px;
  }
  .van-nav-bar__title {
    color: #fff !important;
    font-size: 16px;
  }
  .van-nav-bar__right {
    .van-nav-bar__text {
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>